<template>
    <div class="left_price" :style="`color:${color1}`">
        <span>￥</span>
        <span class="price">{{banner.basicPrice}}</span>
        <span :style="`color:${color2}`">{{ finalPrice.prefix }} {{ finalPrice.price }}</span>
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue"
export default defineComponent({
    name: 'DetailPrice',
})
</script>

<script lang="ts" setup>
import { computed } from "vue";
    const props = defineProps<{
        color1:string,
        color2:string,
        banner:any
    }>()
    // 计算数据
    const finalPrice = computed(()=>{
        return props.banner?.finalPrice || {}
    })
</script>

<style scoped>
.left_price {
    font-size: 16px;
    font-weight: 600;
    /* color: red; */
}

.price {
    font-size: 26px;
    font-family: Arial, Helvetica, sans-serif;
}

.left_price span:last-of-type {
    display: inline-block;
    border-radius: 20px;
    width: 60px;
    text-align: center;
    /* text-decoration: line-through; */
    font-weight: bold;
    background-color: #fff;
    font-size: 13px;
}
</style>